<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>农资商城销售系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/admin/css/layui.css}">
    <link rel="stylesheet" th:href="@{/admin/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/admin/js/jquery-3.5.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/admin/lib/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/global.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/xadmin.js}"></script>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">商品管理</a>
            <a>
              <cite>商品列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="名称" name="title" id="title">
                        </div>
                        <div class="layui-inline layui-show-xs-block layui-form">
                            <select name="typeid" id="typeid" lay-search="">
                                <option value="0">请选择类型</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="state" id="state" lay-search="">
                                <option value="0">请选择状态</option>
                                <option value="1">上架</option>
                                <option value="2">下架</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table id="test" class="layui-hide" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 表头 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn" lay-event="add"><i class="layui-icon"></i>添加
        </button>
    </div>
</script>

<!-- 行内 -->
<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-icon" lay-event="selectImg"><i class="layui-icon">&#xe615;</i>商品图</a>
        <a class="layui-btn layui-btn-xs layui-icon" lay-event="update"><i class="layui-icon">&#xe642;</i>修改</a>
        <a class="layui-btn layui-btn-xs layui-icon" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script type="text/html" id="switchTpl">
    <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="stateDemo" {{ d.state === 1 ? 'checked' : '' }}>
</script>

</body>
<script>

    layui.use(['laydate', 'form', 'table'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;

        //查询所有分类
        $.get(prefix+'/type/findAll', function (res) {
            if (res.code === 200) {
                let data = res.data;
                //循环遍历加入到下拉列表中typeid
                for (let i = 0; i < data.length; i++) {
                    let option = '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    $("#typeid").append(option);
                }
            }
            form.render('select');
        })

        //初始化表格数据
        table.render({
            elem: '#test',
            url: prefix + '/goods/selectAll',
            toolbar: '#toolbarDemo',
            method: "get",
            defaultToolbar: ['filter', 'print', 'exports'],
            title: '商品列表',
            page: true,
            id: 'liebiao',
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": res.msg,
                    "count": res.data.count,
                    "data": res.data.data
                }
            },
            cols: [
                [
                    {
                        field: 'id',
                        title: 'ID',
                        sort: true,
                        align: 'center',
                    },
                    {
                        field: 'title',
                        title: '名称',
                        align: 'center',
                    },
                    {
                        field: 'typename',
                        title: '类型',
                        align: 'center'
                    }, {
                    field: 'img',
                    title: '主图',
                    align: 'center',
                    templet: function (d) {
                        return '<img src="'+d.img+'" width="100px" height="100px" alt="">';
                    }
                }, {
                    field: 'describe',
                    title: '描述',
                    align: 'center',
                },  {
                    field: 'price',
                    title: '价格',
                    align: 'center'
                }, {
                    field: 'stock',
                    title: '库存',
                    align: 'center',
                }, {
                    field: 'state',
                    title: '状态',
                    align: 'center',
                    templet: '#switchTpl',
                }, {
                    field: 'time',
                    title: '时间',
                    align: 'center',
                }, {
                    field: 'detailhtml',
                    title: '详情',
                    align: 'center',
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 280,
                    align: 'center'
                }
                ]
            ],
            done: function (res, curr, count) {
                // 如果有使用到下拉筛选，这句话必须要
                hoverOpenImg();//显示大图
                $('table tr').on('click', function () {
                    $('table tr').css('background', '');
                    $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }
        });

        function hoverOpenImg() {
            var img_show = null; // tips提示
            $('td img').hover(function () {
                var kd = $(this).width();
                kd1 = kd * 4;          //图片放大倍数
                kd2 = kd * 4 + 30;       //图片放大倍数
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: [kd2 + 'px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:70px;display:block!important');
        };

        //上下架操作
        form.on('switch(stateDemo)', function(obj){
                $.ajax({
                    url: prefix + '/goods/update',
                    type: 'post',
                    data: {
                        id: this.value,
                        state: obj.elem.checked===true?1:2,
                    },
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {
                                table.reload('liebiao');
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000
                            });
                        }
                    },
                    error: function (res) {
                        layer.msg('操作失败！');
                    }
                })
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '您正在添加商品信息',
                        type: 2,
                        shade: 0.3,
                        shadeClose: true,
                        skin: 'layui-layer-molv',
                        anim: 5,
                        btnAlign: 'c',
                        closeBtn: 1,
                        area: [($(window).width() - 50) + "px", ($(window).height() - 50) + "px"],
                        content: prefix + '/addGoods',
                        end: function () {
                            table.reload('liebiao');
                        }
                    });
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                layer.confirm('真的删除吗', function (index) {
                    $.post(prefix + '/goods/delete', {id: data.id}, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {
                                table.reload('liebiao');
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000
                            });
                        }
                    })
                });
            } else if (obj.event === 'update') {
                layer.open({
                    title: '您正在修改商品名称为：' + obj.data.title + '信息',
                    type: 2,
                    shade: 0.3,
                    shadeClose: true,
                    skin: 'layui-layer-molv',
                    anim: 5,
                    btnAlign: 'c',
                    closeBtn: 1,
                    area: [($(window).width() - 50) + "px", ($(window).height() - 50) + "px"],
                    content: prefix + '/updateGoods',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find("#id").val(obj.data.id);
                        body.find("#title").val(obj.data.title);
                        body.find("#typeides").val(obj.data.typeid);
                        body.find("#imges").attr("src",obj.data.img);
                        body.find("#img").val(obj.data.img);
                        body.find("#describe").val(obj.data.describe);
                        body.find("#price").val(obj.data.price);
                        body.find("#stock").val(obj.data.stock);
                        body.find("#statees").val(obj.data.state);
                        body.find("#time").val(obj.data.time);
                        body.find("#detail").val(obj.data.detail);
                        body.find("#detailhtml").val(obj.data.detailhtml);
                    },
                    end: function () {
                        table.reload('liebiao');
                    }
                });
            } else if (obj.event === 'selectImg') {
                layer.open({
                    title: '您正在查看商品名称为：' + obj.data.title + '的商品图信息',
                    type: 2,
                    shade: 0.3,
                    shadeClose: true,
                    skin: 'layui-layer-molv',
                    anim: 5,
                    btnAlign: 'c',
                    closeBtn: 1,
                    area: [($(window).width() - 50) + "px", ($(window).height() - 50) + "px"],
                    content: prefix + '/goodsImgList',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find("#goodsid").val(obj.data.id);
                    },
                    end: function () {
                        table.reload('liebiao');
                    }
                });
            }
        });

        // 搜索提交
        form.on('submit(sreach)', function (data) {
            let field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('liebiao', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            return false; // 阻止默认 form 跳转
        });


    });



</script>
</html>